<template>
    <page-view class="flex flex-col">
        <title-bar>订单</title-bar>
        <div class=" flex-1 overflow-auto bg-gray-100">
            <my-loading :isLoading="isFirstLoading" v-if="loginUserInfo">
                <PullRefresh v-model="isLoading" @refresh="refreshData">
                    <List finished-text="没有更多数据了" loading-text="正在加载数据"
                        :finished="pageIndex >= pageCount" :loading="isLoading" @load="loadNextPageOrder">
                        <TransitionGroup enter-active-class="animate__animated animate__slideInUp">
                            <div class="bg-white box-border p-5 my-4" v-for="item in listData" :key="item.id">
                                <ul class="text-[14px] leading-[28px]">
                                    <li><span class="font-bold">订单编号：</span>{{ item.id }}</li>
                                    <li><span class="font-bold">订单时间：</span>{{ formatDateTime(item.submit_time) }}</li>
                                    <li><span class="font-bold">菜品总数：</span>{{ item.orderDetailList.length }}</li>
                                    <li><span class="font-bold">订单金额：</span>￥ {{ item.order_money }}</li>
                                    <li><span class="font-bold">订单状态：</span>{{ item.order_status }}</li>
                                </ul>
                                <Steps :active="item.order_status === '已付款' ? 1 : 0">
                                    <Step>未付款</Step>
                                    <Step>已付款</Step>
                                    <Step>已发货</Step>
                                    <Step>交易完成</Step>
                                </Steps>
                                <p class=" text-[14px] font-bold">订单列表</p>
                                <div v-for="(foodItem, index) in item.orderDetailList" :key="foodItem.id">
                                    <div class="py-1">
                                        <div
                                            class="flex flex-row py-2 justify-between border-0 border-b border-dashed border-gray-300">
                                            {{ index + 1 }}.{{ foodItem.foodInfo.food_name }} × {{
                                                    foodItem.foodInfo.price
                                            }}<span>{{ foodItem.count }}</span>
                                        </div>
                                    
                                    </div>
                                </div>
                                <div class="py-4 flex flex-row justify-end" v-if="item.order_status=='已发货'">
                                    <Button type="primary" size="mini" plain>评价</Button>
                                </div>
                                <div class="flex flex-row justify-between" v-show="item.order_status === '未付款' ? 1 : 0">
                                    <Button type="danger" size="mini" plain>取消订单</Button>
                                    <Button @click="item.order_status = '已付款'" type="primary" size="mini" plain>付款</Button>
                                </div>
                            </div>
                        </TransitionGroup>
                    </List>
                </PullRefresh>
            </my-loading>
            <p class="text-center py-10 text-[14px]" v-else>
                你还没有登录，请先去
                <router-link class="text-primaryColor" :to="{name:'Login'}">登录</router-link>
            </p>
        </div>
    </page-view>
</template>
<script>
import API from "@/utils/API";
import { Steps, Step, Button, List, PullRefresh } from "vant";
import { formatDateTime } from "@/utils/DateTimeUtils";
import {mapGetters} from "vuex";
export default {
    name: "Order",
    data() {
        return {
            isFirstLoading: true,
            isLoading: false,
            pageIndex: 1,
            pageCount: 0,
            listData: [],
            orderStatusMap: ["未付款", "已付款", "已发货", "交易完成"]
        }
    },
    computed:{
        ...mapGetters(["loginUserInfo"])
    },  
    // created() {
    //     if(this.loginUserInfo){
    //         this.getMyOrderListByPage({ pageIndex: this.pageIndex });
    //     }
    // },
    //这是Keep-alive以后的组件被重新激活以后
    activated(){
        //如果用户已经登陆了，并且之前还没有请求数据的，我就请求数据，
        if(this.loginUserInfo&&this.isFirstLoading){
            this.getMyOrderListByPage({pageIndex:this.pageIndex});
        }
    },
    methods: {
        formatDateTime,
        async getMyOrderListByPage({ pageIndex, isRefresh = false }) {
            this.isLoading = true;
            let result = await API.orderInfo.getMyOrderListByPage({ pageIndex });
            this.pageIndex = result.pageIndex;
            this.pageCount = result.pageCount;
            if (isRefresh) {
                //说明这里是刷新的请求数据，那么之前的数据就可以不用要了，直接替换
                this.listData = result.listData;
            }
            else {
                this.listData.push(...result.listData);
            }
            this.isLoading = false;
            this.isFirstLoading = false;
        },
        loadNextPageOrder() {
            this.pageIndex++;
            this.getMyOrderListByPage({ pageIndex: this.pageIndex });
        },
        //下拉刷新
        refreshData() {
            this.pageIndex = 1;
            this.getMyOrderListByPage({ pageIndex: this.pageIndex, isRefresh: true });
        }
    },
    components: {
        Steps, Step, Button, List, PullRefresh
    }
};
</script>
<style lang="scss" scoped>
.food-list {
    >li {
        @apply border-0 border-b border-dashed border-gray-400 py-6;
    }
}
</style>